<template>
  <div class="login_container" v-loading="loading">
    <div style="height: 50px">统计导出</div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item style="margin-right: 55px" label="选择内容">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="统计时间">
        <div class="block">
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="left"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="dateSelect"
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">导出</el-button>
        <el-button @click="chongzhi">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      // 表单对象
      formInline: {},
      options: [
        {
          label: '手术交班数据',
          value: '0'
        },
        {
          label: '病理交班数据',
          value: '1'
        },
        {
          label: '主诊组患者手术得分',
          value: '2'
        },
        {
          label: '主诊手术人数统计',
          value: '3'
        },
        {
          label: '亚专业工作总量表',
          value: '4'
        }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value: '',
      value2: [],
      dateStrStart: '',
      dateStrEnd: ''
    }
  },
  async mounted () {},
  methods: {
    chongzhi () {
      this.value = ''
      this.value2 = []
    },
    async onSubmit () {
      if (this.value === '') {
        this.$message.error('请选择内容')
        return
      }
      if (this.value2.length === 0) {
        this.$message.error('请选择统计时间段')
        return
      }
      try {
        const queryParam = {
          value: this.value,
          dateStrStart: this.dateStrStart,
          dateStrEnd: this.dateStrEnd
        }
        this.loading = true
        const queryParams = this.queryParams
        const res = await this.$http.get('score/report', {
          params: queryParam
        })
        this.loading = false
        if (res.data.code !== 0) {
          this.$message.error(res.data.msg)
          return
        }
        console.log(res)
        const uniqueName = res.data.data.uniqueName
        const fileName = res.data.data.fileName
        const fileDirectory = res.data.data.fileDirectory
        // 下载文件
        const fileRes = await this.$http.get(
          'tmpfile/' + fileDirectory + '/' + uniqueName,
          {
            responseType: 'blob'
          }
        )
        const blob = new Blob([fileRes.data])
        const contentDisposition = res.headers['content-disposition']
        // const pattern = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
        // const result = pattern.exec(contentDisposition)
        const downloadElement = document.createElement('a')
        // 创建下载的链接
        const href = window.URL.createObjectURL(new Blob([fileRes.data]))
        downloadElement.style.display = 'none'
        downloadElement.href = href
        // 下载后文件名
        downloadElement.download = fileName
        document.body.appendChild(downloadElement)
        // 点击下载
        downloadElement.click()
        // 下载完成移除元素
        document.body.removeChild(downloadElement)
        // 释放掉blob对象
        window.URL.revokeObjectURL(href)

        /** 调用接口删除文件 */
        await this.$http.get('score/delete', {
          params: { fileDirectory }
        })
      } catch (error) {
        this.loading = false
        console.error(error)
      }

      // try {
      //   const queryParam = {
      //     value: this.value,
      //     dateStrStart: this.dateStrStart,
      //     dateStrEnd: this.dateStrEnd
      //   }
      //   this.loading = true
      //   const queryParams = this.queryParams
      //   const res = await this.$http.get('score/report', {
      //     params: queryParam,
      //     responseType: 'blob'
      //   })

      //   if (res.status !== 200) {
      //     this.$message.error('')
      //     this.loading = false
      //     return
      //   }
      //   this.loading = false
      //   const blob = new Blob([res.data])
      //   const contentDisposition = res.headers['content-disposition']
      //   const pattern = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
      //   const result = pattern.exec(contentDisposition)

      //   // 使用decodeURI对名字进行解码
      //   const fileName = decodeURIComponent(result[1])

      //   const downloadElement = document.createElement('a')
      //   // 创建下载的链接
      //   const href = window.URL.createObjectURL(blob)
      //   downloadElement.style.display = 'none'
      //   downloadElement.href = href
      //   // 下载后文件名
      //   downloadElement.download = fileName
      //   document.body.appendChild(downloadElement)
      //   // 点击下载
      //   downloadElement.click()
      //   // 下载完成移除元素
      //   document.body.removeChild(downloadElement)
      //   // 释放掉blob对象
      //   window.URL.revokeObjectURL(href)
      // } catch (error) {
      //   this.loading = false
      //   console.error(error)
      // }
    },
    selectType (val) {},
    dateSelect () {
      this.dateStrStart = this.value2[0]
      this.dateStrEnd = this.value2[1]
    },
    download (fileName) {
      window.location.href = `${window.urlConfig.report}?value=${this.value}&dateStrStart=${this.dateStrStart}&dateStrEnd=${this.dateStrEnd}`
    },
    decodeUtf8 (bytes) {
      var encoded = ''
      for (var i = 0; i < bytes.length; i++) {
        encoded += '%' + bytes[i].toString(16)
      }
      return decodeURIComponent(encoded)
    }
  }
}
</script>

<style lang="less" scoped>
.login_container {
  position: absolute;
  left: 20%;
  top: 10%;
}
</style>
